<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="utf-8">
  
  <title>regex | ryansecreat blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="s修饰符使得 . 能够匹配任何字符/foo.bar/s.test(‘foo\nbar’) ? 非贪婪模式? 非贪婪模式，只匹配最少的数据。 对 “123abc” 应用 /\d+/ 将会返回 “123”，如果使用 /\d+?/,那么就只会匹配到 “1”。 先行断言x(?=y)  匹配’x’仅仅当’x’后面跟着’y’.这种叫做先行断言。例如，/Jack(?=Sprat)/会匹配到’Jack’仅仅当它后">
<meta name="keywords" content="regex">
<meta property="og:type" content="article">
<meta property="og:title" content="regex">
<meta property="og:url" content="http://yoursite.com/2019/06/24/regex/index.html">
<meta property="og:site_name" content="ryansecreat blog">
<meta property="og:description" content="s修饰符使得 . 能够匹配任何字符/foo.bar/s.test(‘foo\nbar’) ? 非贪婪模式? 非贪婪模式，只匹配最少的数据。 对 “123abc” 应用 /\d+/ 将会返回 “123”，如果使用 /\d+?/,那么就只会匹配到 “1”。 先行断言x(?=y)  匹配’x’仅仅当’x’后面跟着’y’.这种叫做先行断言。例如，/Jack(?=Sprat)/会匹配到’Jack’仅仅当它后">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2019-11-26T03:08:47.063Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="regex">
<meta name="twitter:description" content="s修饰符使得 . 能够匹配任何字符/foo.bar/s.test(‘foo\nbar’) ? 非贪婪模式? 非贪婪模式，只匹配最少的数据。 对 “123abc” 应用 /\d+/ 将会返回 “123”，如果使用 /\d+?/,那么就只会匹配到 “1”。 先行断言x(?=y)  匹配’x’仅仅当’x’后面跟着’y’.这种叫做先行断言。例如，/Jack(?=Sprat)/会匹配到’Jack’仅仅当它后">
  
    <link rel="alternate" href="/atom.xml" title="ryansecreat blog" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  

  
  <link rel="stylesheet" href="/css/style.css">
  

</head>
</html>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">ryansecreat blog</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">smile hard</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-regex" class="article article-type-post" itemscope="" itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/06/24/regex/" class="article-date">
  <time datetime="2019-06-24T05:56:32.000Z" itemprop="datePublished">2019-06-24</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      regex
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="s修饰符使得-能够匹配任何字符"><a href="#s修饰符使得-能够匹配任何字符" class="headerlink" title="s修饰符使得 . 能够匹配任何字符"></a>s修饰符使得 . 能够匹配任何字符</h3><p>/foo.bar/s.test(‘foo\nbar’)</p>
<h3 id="非贪婪模式"><a href="#非贪婪模式" class="headerlink" title="? 非贪婪模式"></a>? 非贪婪模式</h3><p>? 非贪婪模式，只匹配最少的数据。 对 “123abc” 应用 /\d+/ 将会返回 “123”，如果使用 /\d+?/,那么就只会匹配到 “1”。</p>
<h3 id="先行断言"><a href="#先行断言" class="headerlink" title="先行断言"></a>先行断言</h3><p>x(?=y)  匹配’x’仅仅当’x’后面跟着’y’.这种叫做先行断言。例如，/Jack(?=Sprat)/会匹配到’Jack’仅仅当它后面跟着’Sprat’。/Jack(?=Sprat|Frost)/匹配‘Jack’仅仅当它后面跟着’Sprat’或者是‘Frost’。但是‘Sprat’和‘Frost’都不是匹配结果的一部分。</p>
<h3 id="后行断言"><a href="#后行断言" class="headerlink" title="后行断言"></a>后行断言</h3><p>(?&lt;=y)x  匹配’x’仅仅当’x’前面是’y’.这种叫做后行断言。</p>
<h3 id="正向否定查找"><a href="#正向否定查找" class="headerlink" title="正向否定查找"></a>正向否定查找</h3><p>x(?!y)   匹配’x’仅仅当’x’后面不跟着’y’,这个叫做正向否定查找。/\d+(?!.)/匹配一个数字仅仅当这个数字后面没有跟小数点的时候。正则表达式/\d+(?!.)/.exec(“3.141”)匹配‘141’而不是‘3.141’</p>
<h3 id="边界"><a href="#边界" class="headerlink" title="边界"></a>边界</h3><p>\b 匹配一个词的边界。<br>\B 匹配一个非单词边界</p>
<h3 id="w"><a href="#w" class="headerlink" title="w"></a>w</h3><p>\w 匹配一个单字字符（字母、数字或者下划线）。<br>等价于[A-Za-z0-9_]。</p>
<p>例如, /\w/ 匹配 “apple,” 中的 ‘a’，”$5.28,”中的 ‘5’ 和 “3D.” 中的 ‘3’。</p>
<p>\W 匹配一个非单字字符。</p>
<p>等价于[^A-Za-z0-9_]。</p>
<p>例如, /\W/ 或者 /[^A-Za-z0-9_]/ 匹配 “50%.” 中的 ‘%’。</p>
<h3 id="子字符串匹配"><a href="#子字符串匹配" class="headerlink" title="子字符串匹配"></a>子字符串匹配</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var re = /(\w+)\s(\w+)/;</span><br><span class="line">var str = &quot;John Smith&quot;;</span><br><span class="line">var newstr = str.replace(re, &quot;$2, $1&quot;);</span><br><span class="line">console.log(newstr);</span><br></pre></td></tr></table></figure>
<h4 id="非捕获组"><a href="#非捕获组" class="headerlink" title="非捕获组"></a>非捕获组</h4><p>?: 用非捕获组 提升匹配效率。</p>
<p>y修饰符的一个应用，是从字符串提取 token（词元），y修饰符确保了匹配之间不会有漏掉的字符。可以修改regex的 lastIndex 。</p>
<h3 id="具名匹配"><a href="#具名匹配" class="headerlink" title="具名匹配"></a>具名匹配</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">const RE_DATE = /(\d&#123;4&#125;)-(\d&#123;2&#125;)-(\d&#123;2&#125;)/;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">const matchObj = RE_DATE.exec(&apos;1999-12-31&apos;);</span><br><span class="line"></span><br><span class="line">const year = matchObj[1]; // 1999</span><br><span class="line"></span><br><span class="line">const month = matchObj[2]; // 12</span><br><span class="line"></span><br><span class="line">const day = matchObj[3]; // 31</span><br><span class="line"></span><br><span class="line">Replace 函数形式：</span><br><span class="line"></span><br><span class="line">&apos;2015-01-02&apos;.replace(re, (</span><br><span class="line"></span><br><span class="line">   matched, // 整个匹配结果 2015-01-02</span><br><span class="line"></span><br><span class="line">   capture1, // 第一个组匹配 2015</span><br><span class="line"></span><br><span class="line">   capture2, // 第二个组匹配 01</span><br><span class="line"></span><br><span class="line">   capture3, // 第三个组匹配 02</span><br><span class="line"></span><br><span class="line">   position, // 匹配开始的位置 0</span><br><span class="line"></span><br><span class="line">   S, // 原字符串 2015-01-02</span><br><span class="line"></span><br><span class="line">   groups // 具名组构成的一个对象 &#123;year, month, day&#125;</span><br><span class="line"></span><br><span class="line"> ) =&gt; &#123;</span><br><span class="line"></span><br><span class="line"> let &#123;day, month, year&#125; = groups;</span><br><span class="line"></span><br><span class="line"> return `$&#123;day&#125;/$&#123;month&#125;/$&#123;year&#125;`;</span><br><span class="line"></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 可以直接赋值</span></span><br><span class="line"><span class="keyword">let</span> &#123;<span class="attr">groups</span>: &#123;one, two&#125;&#125; = <span class="regexp">/^(?&lt;one&gt;.*):(?&lt;two&gt;.*)$/u</span>.exec(<span class="string">'foo:bar'</span>);</span><br><span class="line">one  <span class="comment">// foo</span></span><br><span class="line">two  <span class="comment">// bar</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 直接replace</span></span><br><span class="line"><span class="keyword">let</span> re = <span class="regexp">/(?&lt;year&gt;\d&#123;4&#125;)-(?&lt;month&gt;\d&#123;2&#125;)-(?&lt;day&gt;\d&#123;2&#125;)/u</span>;</span><br><span class="line"></span><br><span class="line"><span class="string">'2015-01-02'</span>.replace(re, <span class="string">'$&lt;day&gt;/$&lt;month&gt;/$&lt;year&gt;'</span>)</span><br></pre></td></tr></table></figure>
<h3 id="使用引用-具名"><a href="#使用引用-具名" class="headerlink" title="使用引用(具名)"></a>使用引用(具名)</h3><p>使用引用：const RE_TWICE = /^(?<word>[a-z]+)!\k<word>$/;</word></word></p>
<p>RE_TWICE.test(‘abc!abc’) // true<br>RE_TWICE.test(‘abc!ab’) // false</p>
<h3 id="捕获组的使用"><a href="#捕获组的使用" class="headerlink" title="捕获组的使用"></a>捕获组的使用</h3><p>Regex 中捕获组的使用：<br>对于普通捕获组和命名捕获组的引用，语法如下：<br>普通捕获组反向引用：\k<number>，通常简写为\number</number></p>
<p>命名捕获组反向引用：\k<name>或者\k’name’</name></p>
<h3 id="匹配字符和非字符"><a href="#匹配字符和非字符" class="headerlink" title="匹配字符和非字符"></a>匹配字符和非字符</h3><p>\b matches the empty string at the beginning or end of a word. </p>
<p>\B matches the empty string not at the beginning or end of a word. </p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/06/24/regex/" data-id="ck3ya0yip00100d8sisze6v2l" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/regex/">regex</a></li></ul>

    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2019/06/24/cookies/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          cookies
        
      </div>
    </a>
  
  
    <a href="/2019/05/14/http/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">http</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/css/">css</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/docker/">docker</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/es/">es</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/eslint/">eslint</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/git/">git</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hexo/">hexo</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/http/">http</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/https/">https</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/interview/">interview</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/loadtest/">loadtest</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ops/">ops</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/pattern/">pattern</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/pm2/">pm2</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/postgre/">postgre</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/regex/">regex</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ts/">ts</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/useful-package/">useful package</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/vue-eventloop-js/">vue eventloop js</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/web-安全/">web 安全</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webpack/">webpack</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/安全/">安全</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/零碎/">零碎</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/css/" style="font-size: 10px;">css</a> <a href="/tags/docker/" style="font-size: 10px;">docker</a> <a href="/tags/es/" style="font-size: 20px;">es</a> <a href="/tags/eslint/" style="font-size: 10px;">eslint</a> <a href="/tags/git/" style="font-size: 10px;">git</a> <a href="/tags/hexo/" style="font-size: 10px;">hexo</a> <a href="/tags/http/" style="font-size: 10px;">http</a> <a href="/tags/https/" style="font-size: 10px;">https</a> <a href="/tags/interview/" style="font-size: 10px;">interview</a> <a href="/tags/loadtest/" style="font-size: 10px;">loadtest</a> <a href="/tags/ops/" style="font-size: 10px;">ops</a> <a href="/tags/pattern/" style="font-size: 10px;">pattern</a> <a href="/tags/pm2/" style="font-size: 10px;">pm2</a> <a href="/tags/postgre/" style="font-size: 10px;">postgre</a> <a href="/tags/regex/" style="font-size: 10px;">regex</a> <a href="/tags/ts/" style="font-size: 10px;">ts</a> <a href="/tags/useful-package/" style="font-size: 10px;">useful package</a> <a href="/tags/vue-eventloop-js/" style="font-size: 10px;">vue eventloop js</a> <a href="/tags/web-安全/" style="font-size: 10px;">web 安全</a> <a href="/tags/webpack/" style="font-size: 10px;">webpack</a> <a href="/tags/安全/" style="font-size: 10px;">安全</a> <a href="/tags/零碎/" style="font-size: 10px;">零碎</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/12/">December 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">November 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/08/">August 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">July 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">June 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/05/">May 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/04/">April 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/02/">February 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/02/">February 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/01/">January 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/12/">December 2016</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2019/12/09/security-1/">security</a>
          </li>
        
          <li>
            <a href="/2019/11/08/encoding/">encoding</a>
          </li>
        
          <li>
            <a href="/2019/08/23/graphql/">graphql</a>
          </li>
        
          <li>
            <a href="/2019/07/02/linux/">linux</a>
          </li>
        
          <li>
            <a href="/2019/07/02/es8/">es8</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2019 ryansecreat<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>

  </div>
</body>
</html>